<template>
  <div class="home-container">
    <div class="greeting-text">你好，{{ userName }}</div>
    <div class="suggestion-text">今天穿什么？</div>

    <!-- 天气信息头部 -->
    <WeatherHeader />
    <!-- 天气相关的穿搭建议 -->
    <WeatherSuggestionSection />

    <!-- 功能卡片区域 -->
    <div class="features-grid">
      <div @click="goTo('/clothes')">
        <svg
          t="1762485511428"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="20274"
          width="36"
          height="36"
        >
          <path
            d="M480.677647 1024H123.080784C87.341176 1024 61.44 983.843137 61.44 928.225882V95.774118C61.44 40.156863 87.341176 0 123.080784 0h357.596863c35.538824 0 61.44 40.156863 61.44 95.372549v833.254902c0 55.215686-25.901176 95.372549-61.44 95.372549zM129.104314 963.764706h345.349019a73.888627 73.888627 0 0 0 7.42902-35.137255V95.372549A77.101176 77.101176 0 0 0 474.654118 60.235294H129.104314A75.093333 75.093333 0 0 0 121.675294 95.774118v832.451764A75.093333 75.093333 0 0 0 129.104314 963.764706z"
            fill="#7e89f0"
            p-id="20275"
          ></path>
          <path
            d="M70.27451 656.564706m20.078431 0l401.568628 0q20.078431 0 20.078431 20.078431l0 0q0 20.078431-20.078431 20.078432l-401.568628 0q-20.078431 0-20.078431-20.078432l0 0q0-20.078431 20.078431-20.078431Z"
            fill="#7e89f0"
            p-id="20276"
          ></path>
          <path
            d="M70.27451 787.877647m20.078431 0l122.679216 0q20.078431 0 20.078431 20.078431l0 0q0 20.078431-20.078431 20.078432l-122.679216 0q-20.078431 0-20.078431-20.078432l0 0q0-20.078431 20.078431-20.078431Z"
            fill="#7e89f0"
            p-id="20277"
          ></path>
          <path
            d="M900.919216 1024H543.322353c-35.538824 0-61.44-40.156863-61.44-95.372549V95.372549C481.882353 40.156863 507.783529 0 543.322353 0h357.596863c35.538824 0 61.640784 40.156863 61.640784 95.774118v832.451764c0 55.617255-26.101961 95.774118-61.640784 95.774118zM549.345882 963.764706h345.34902a74.49098 74.49098 0 0 0 7.629804-35.538824V95.774118A77.703529 77.703529 0 0 0 894.895686 60.235294H549.345882a77.101176 77.101176 0 0 0-7.228235 35.137255v833.254902A74.49098 74.49098 0 0 0 549.345882 963.764706z"
            fill="#7e89f0"
            p-id="20278"
          ></path>
          <path
            d="M953.72549 235.921569m-20.078431 0l-122.679216 0q-20.078431 0-20.078431-20.078432l0 0q0-20.078431 20.078431-20.078431l122.679216 0q20.078431 0 20.078431 20.078431l0 0q0 20.078431-20.078431 20.078432Z"
            fill="#7e89f0"
            p-id="20279"
          ></path>
        </svg>
        <div>我的衣橱</div>
      </div>
      <div @click="goTo('/clothes/upload')">
        <svg
          t="1762485199375"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="8687"
          width="36"
          height="36"
        >
          <path
            d="M512 0c282.752 0 512 229.248 512 512s-229.248 512-512 512S0 794.752 0 512 229.248 0 512 0z m0 85.333333C276.352 85.333333 85.333333 276.352 85.333333 512s191.018667 426.666667 426.666667 426.666667 426.666667-191.018667 426.666667-426.666667S747.648 85.333333 512 85.333333z m-0.042667 170.666667a42.666667 42.666667 0 0 1 42.666667 42.666667v170.666666h170.666667a42.666667 42.666667 0 0 1 0 85.333334h-170.666667v170.666666a42.666667 42.666667 0 0 1-85.333333 0v-170.666666h-170.666667a42.666667 42.666667 0 0 1 0-85.333334h170.666667V298.666667a42.666667 42.666667 0 0 1 42.666666-42.666667z"
            fill="#7e89f0"
            p-id="8688"
          ></path>
        </svg>
        <div>添加衣物</div>
      </div>
      <div @click="goTo('/outfits')">
        <svg
          t="1762485688716"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="22690"
          width="36"
          height="36"
        >
          <path
            d="M661.333333 916.394667a21.333333 21.333333 0 0 1 21.333334 21.333333v42.666667a21.333333 21.333333 0 0 1-21.333334 21.333333h-298.666666a21.333333 21.333333 0 0 1-21.333334-21.333333v-42.666667a21.333333 21.333333 0 0 1 21.333334-21.333333h298.666666z m-149.333333-896a384 384 0 0 1 170.709333 728.064L682.666667 831.061333a42.666667 42.666667 0 0 1-42.666667 42.666667H384a42.666667 42.666667 0 0 1-42.666667-42.666667v-82.602666A384 384 0 0 1 512 20.394667z m0 85.333333a298.666667 298.666667 0 0 0-85.333333 584.96v97.706667h170.666666l0.042667-97.706667A298.666667 298.666667 0 0 0 512 105.728z"
            fill="#7e89f0"
            p-id="22691"
          ></path>
        </svg>
        <div>我的搭配</div>
      </div>
      <div @click="goTo('/statistics')">
        <svg
          t="1762485439194"
          class="icon"
          viewBox="0 0 1107 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="19275"
          id="mx_n_1762485439197"
          width="36"
          height="36"
        >
          <path
            d="M229.748364 1023.906909V342.760727c0-27.159273-20.875636-48.058182-45.940364-48.058182H45.963636c-25.041455 0-45.940364 22.970182-45.940363 48.058182v681.146182h229.725091z m292.375272 0V50.245818c0-27.182545-20.875636-50.152727-45.940363-50.152727h-137.844364c-25.064727 0-45.940364 22.970182-45.940364 50.152727v973.661091h229.725091z m292.375273 0V593.477818c0-27.159273-20.875636-50.129455-45.940364-50.129454h-137.82109c-25.064727 0-45.963636 22.970182-45.963637 50.129454v430.429091h229.725091z m292.375273 0V342.760727c0-27.159273-20.875636-48.058182-45.940364-48.058182h-137.844363c-25.041455 0-45.940364 22.970182-45.940364 48.058182v681.146182h229.725091z"
            fill="#7e89f0"
            p-id="19276"
          ></path>
        </svg>
        <div>数据分析</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from "vue";
import { useRouter } from "vue-router";
import { useWeatherStore } from "../store/weather";
import { useUserStore } from "../store/user";
import WeatherHeader from "../components/WeatherHeader.vue";
import FeatureCard from "../components/FeatureCard.vue";
import RecentClothesSection from "../components/RecentClothesSection.vue";
import WeatherSuggestionSection from "../components/WeatherSuggestionSection.vue";

const weatherStore = useWeatherStore();
const userStore = useUserStore();
const router = useRouter();

const goTo = (path) => {
  router.push(path);
};

// 使用可选链和默认值，避免在userInfo为null时出错
const userName = userStore.userInfo?.name || '用户';

onMounted(() => {
  // 优先使用缓存数据
  const cachedData = weatherStore.getWeatherData();

  // 如果没有缓存数据，才发送API请求
  if (!cachedData) {
    weatherStore.fetchWeatherData();
  }
});
</script>

<style scoped>
.home-container {
  min-height: 100vh;
  padding: 20px 20px 60px 20px;
  /* background-color: #f5f5f5; */
  /* background: linear-gradient(180deg, #f0f2ff 0%, #fcf8ff 100%); */
}

.greeting-text {
  color: #999999;
}

.suggestion-text {
  font-size: 22px;
  color: #000;
  font-weight: bold;
  margin-bottom: 20px;
}

.content-wrapper {
  /* max-width: 1200px; */
  margin: 0 auto;
}

/* 两列网格布局 */
.features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

/* 卡片样式规范 */
.features-grid > div {
  background-color: #ffffff;
  border-radius: 24px;
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 120px;
}

/* 卡片内内容元素间距 */
.features-grid > div > svg,
.features-grid > div > div {
  margin-bottom: 10px;
}

.features-grid > div > div:last-child {
  margin-bottom: 0;
  font-size: 16px;
  font-weight: bold;
}

/* FeatureCard组件样式 */
.features-grid .feature-card {
  background-color: #ffffff;
  border-radius: 24px;
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 120px;
}

.welcome-section {
  text-align: center;
  margin-bottom: 30px;
  padding: 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.welcome-section h1 {
  font-size: 28px;
  color: #333;
  margin-bottom: 10px;
}

.welcome-section p {
  font-size: 16px;
  color: #666;
}

@media (max-width: 768px) {
  .welcome-section h1 {
    font-size: 24px;
  }
}
</style>
